<template>
  <div class="card" style="width: 60%; padding: 40px 20px">
    <el-form ref="formRef" :model="data.form" :rules="data.rules" label-width="80px">
      <el-form-item label="头像">
        <div style="width:60%; display:flex; justify-content:center; margin-bottom:20px">
          <el-upload class="avatar-uploader" action="http://localhost:8080/files/upload" :show-file-list="false"
            :on-success="handleAvatarSuccess">
            <img v-if="data.form.avatar" :src="data.form.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </div>
      </el-form-item>

      <el-form-item label="账号" prop="username">
        <el-input disabled v-model="data.form.username" placeholder="请输入账号" />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="data.form.password" placeholder="请输入密码" show-password/>
      </el-form-item>

      <el-form-item label="名称" prop="name">
        <el-input v-model="data.form.name" placeholder="请输入名称" />
      </el-form-item>

      <el-form-item label="性别" prop="sex" v-if="data.form.role === 'STU' || data.form.role === 'PRE'">
        <el-radio-group v-model="data.form.sex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="专业" prop="major" v-if="data.form.role === 'STU' || data.form.role === 'PRE'">
        <el-input v-model="data.form.major" placeholder="请输入专业" />
      </el-form-item>

      <el-form-item label="联系方式" prop="contact_info">
        <el-input v-model="data.form.contact_info" placeholder="请输入联系方式" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email" v-if="data.form.role === 'PRE'">
        <el-input v-model="data.form.email" placeholder="请输入社长邮箱" />
      </el-form-item>
      <el-form-item label="介绍" prop="descr" v-if="data.form.role === 'STU' || data.form.role === 'PRE'">
        <el-input type="textarea" :rows="3" v-model="data.form.descr" placeholder="请输入个人介绍" />
      </el-form-item>

      <div style="text-align:center; margin-top: 20px;">
        <el-button type="primary" @click="updateUser">更新个人信息</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue';
import { ElMessage } from 'element-plus';
import request from '@/utils/request.js';

const formRef = ref();
const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-pro-user')),
  form: {},
  rules: {
    username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
    major: [{ required: true, message: '请输入专业', trigger: 'blur' }],
    contact_info: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
  }
});

onBeforeMount(() => {
  const { role, id } = data.user;
  if (role === 'STU') {
    request.get(`/student/selectById/${id}`).then(res => { data.form = res.data });
  } else if (role === 'PRE') {
    request.get(`/president/selectById/${id}`).then(res => { data.form = res.data });
  } else if (role === 'ADM') {
    request.get(`/admin/selectById/${id}`).then(res => { data.form = res.data });
  }
});

const updateUser = () => {
  const urlMap = {
    STU: '/student/updateById',
    PRE: '/president/updateById',
    ADM: '/admin/updateById'
  };
  const url = urlMap[data.user.role];
  request.put(url, data.form).then(res => {
    if (res.code === '200') {
      ElMessage.success('更新成功');
      localStorage.setItem('xm-pro-user', JSON.stringify(data.form));
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const handleAvatarSuccess = (res) => {
  if (res.errno === 0 && res.data && res.data.url) {
    data.form.avatar = res.data.url;
    ElMessage.success("上传成功");
  } else {
    ElMessage.error("上传失败：" + (res.message || "未知错误"));
  }
};
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 50%;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
  line-height: 120px;
}
</style>